<template>
  <div>
    <XFHeaderSearch v-model="state.searchInfo.keyword"
                    placeholder="请输入知识库名称"
                    @search="searchClick"
                    @reset="resetClick">
      <template #default>
      </template>
    </XFHeaderSearch>
    <XFHeaderButtons>
      <template #default>
        <el-button type="primary" @click="addClick">新增</el-button>
      </template>
    </XFHeaderButtons>
    <div class="item-card-container">
      <el-card shadow="hover" v-for="item in state.tableData" class="item-card">
        <template #default>
          <div>{{ item.kname }}</div>
          <div>{{ item.description }}</div>
        </template>
      </el-card>
    </div>
    <div>
      <XFPagination
          :current-page="state.pageInfo.pageNum"
          :page-size="state.pageInfo.pageSize"
          :total="state.total"

      />
    </div>
  </div>
  <Edit v-model="state.searchVisible" @updateTable="getTableData"></Edit>
</template>
<script setup>

import {onMounted, reactive} from "vue";
import XFHeaderSearch from "@/views/component/XFHeaderSearch.vue";
import XFHeaderButtons from "@/views/component/XFHeaderButtons.vue";
import Edit from "./edit.vue";
import api from "@/utils/api.js";
import {ElMessage} from "element-plus";
import paginationUtil from "@/utils/paginationUtil.js";
import XFPagination from "@/views/component/XFPagination.vue";

const state = reactive({
  searchInfo: {},
  pageInfo: paginationUtil.getPage(),
  total: 0,
  tableData: []
})


const resetClick = () => {
  state.searchInfo = {};
  getTableData();
}

const searchClick = () => {
  getTableData()
}

const addClick = () => {
  state.searchVisible = true;
}
top.state = state;
const getTableData = async () => {
  const res = await api.knowledgeInfo.list(state.searchInfo, state.pageInfo);
  if (res?.code === 200) {
    state.tableData = res?.rows;
    state.total = res.total;
  } else {
    ElMessage({
      message: res?.msg || "查询失败",
      type: "error"
    })
  }
}

onMounted(() => {
  getTableData();
})

</script>
<style scoped>
.item-card-container {
  //padding: 10px;
  margin: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  .item-card {
    width: 270px;
    height: 200px;
  }

}
</style>